<template>
  <div class="linux-commands-container">
      <div class="tab-buttons">
          <button v-for="(category, index) in commandCategories" :key="index" :class="{ active: activeTab === index }" @click="setActiveTab(index)">{{ category }}</button>
      </div>
      <div class="tab-content" style="max-height: calc(100vh - 150px); overflow-y: auto;">
          <div v-for="(category, index) in commandCategories" :key="index" v-show="activeTab === index">
              <div class="command-item" v-for="(command, cmdIndex) in commandsByCategory[category]" :key="cmdIndex">
                  <h3>{{ command.name }}</h3>
                  <p>说明：{{ command.description }}</p>
                  <span v-if="command.example">示例：<code><span>{{ command.example }}</span></code></span>
              </div>
          </div>
      </div>
  </div>
</template>


<script setup>
import { ref } from 'vue';

// 命令分类数组，可根据需要添加更多分类名称
const commandCategories = ref([
    '文件操作',
    '进程管理',
    '网络相关',
    '系统管理',
    '文本处理',
    '权限管理',
    '软件安装与管理',
    '磁盘管理',
    '备份与压缩'
]);
// 当前激活的选项卡索引，初始化为0（对应第一个分类）
const activeTab = ref(0);
// 以分类名称为键，对应命令数组为值的对象，用于存放各分类下的命令
const commandsByCategory = ref({
  '文件操作': [
        {
            name: "ls",
            description: "查看文件和目录列表",
            example: "ls -l /home" // 以长格式查看/home目录下的文件和目录列表
        },
        {
            name: "cd",
            description: "切换当前工作目录",
            example: "cd /var/www" // 切换到/var/www目录
        },
        {
            name: "mkdir",
            description: "创建新目录",
            example: "mkdir mynewdir" // 在当前目录下创建名为mynewdir的新目录
        },
        {
            name: "rm",
            description: "删除文件或目录",
            example: "rm -r mydir" // 递归删除名为mydir的目录及其内容
        },
        {
            name: "cp",
            description: "复制文件或目录",
            example: "cp file1.txt /tmp/file1.txt" // 将当前目录下的file1.txt复制到/tmp目录下
        },
        {
            name: "mv",
            description: "移动或重命名文件、目录",
            example: "mv oldfile.txt newfile.txt" // 将当前目录下的oldfile.txt重命名为newfile.txt
        },
        {
            name: "touch",
            description: "创建空文件或更新文件时间戳",
            example: "touch newfile.txt" // 在当前目录下创建名为newfile.txt的空文件
        },
        {
            name: "ln",
            description: "创建链接文件（软链接或硬链接）",
            example: "ln -s /usr/bin/python3 /usr/local/bin/python" // 创建一个指向/usr/bin/python3的软链接到/usr/local/bin/python
        },
        {
            name: "chmod",
            description: "改变文件或目录的权限",
            example: "chmod 755 myscript.sh" // 将myscript.sh文件权限设置为所有者可读可写可执行，群组和其他用户可读可执行
        },
        {
            name: "chown",
            description: "更改文件或目录的所有者",
            example: "chown user:group file.txt" // 将file.txt的所有者改为user，所属组改为group
        },
        {
            name: "find",
            description: "在指定目录下查找文件",
            example: "find / -name '*.txt'" // 在根目录下查找所有.txt后缀的文件
        },
        {
            name: "du",
            description: "查看目录或文件占用的磁盘空间大小",
            example: "du -sh /home" // 以总结模式查看/home目录占用的磁盘空间大小，-s表示总结，-h表示人类可读
        },
        {
            name: "df",
            description: "查看文件系统的磁盘空间使用情况",
            example: "df -h" // 以人类可读的格式查看磁盘空间使用情况
        }
    ],
    '进程管理': [
        {
            name: "ps",
            description: "查看当前系统中的进程信息",
            example: "ps -ef" // 查看所有进程的详细信息
        },
        {
            name: "kill",
            description: "终止指定进程",
            example: "kill 1234" // 终止进程号为1234的进程
        },
        {
            name: "killall",
            description: "通过进程名终止所有相关进程",
            example: "killall httpd" // 终止所有名为httpd的进程
        },
        {
            name: "pkill",
            description: "按条件终止进程（如按名称、用户等）",
            example: "pkill -u username" // 终止属于username用户的所有进程
        },
        {
            name: "top",
            description: "实时显示系统中各个进程的资源占用情况",
            example: "top" // 直接运行top命令，然后可按相应按键操作查看不同信息
        },
        {
            name: "htop",
            description: "交互式的进程查看工具，功能类似top但界面更友好",
            example: "htop" // 运行htop命令查看进程信息，支持鼠标操作等便捷功能
        },
        {
            name: "bg",
            description: "将作业放到后台运行",
            example: "bg %1" // 将编号为1的作业放到后台运行（假设之前有任务在前台暂停）
        },
        {
            name: "fg",
            description: "将后台作业调回前台运行",
            example: "fg %2" // 将编号为2的后台作业调回前台运行
        },
        {
            name: "nice",
            description: "以指定的优先级运行进程",
            example: "nice -n 10 command" // 以优先级10运行command命令
        }
    ],
    '网络相关': [
        {
            name: "ping",
            description: "测试网络连通性",
            example: "ping www.example.com" // 向www.example.com发送ICMP包测试网络连通性
        },
        {
            name: "ifconfig",
            description: "查看网络接口配置信息（部分系统使用ip addr替代）",
            example: "ifconfig eth0" // 查看eth0网络接口的配置信息
        },
        {
            name: "netstat",
            description: "查看网络连接、路由表等网络相关状态信息",
        example: "netstat -an" // 查看所有网络连接及监听端口等信息
        },
        {
            name: "ip",
            description: "功能强大的网络配置工具，可配置网络接口、路由等",
            example: "ip addr add 192.168.1.100/24 dev eth0" // 给eth0网络接口添加IP地址192.168.1.100，子网掩码为24位
        },
        {
            name: "route",
            description: "查看和配置路由表",
            example: "route add default gw 192.168.1.1" // 添加默认网关为192.168.1.1
        },
        {
            name: "traceroute",
            description: "跟踪数据包到目标主机所经过的路由",
            example: "traceroute 8.8.8.8" // 跟踪到8.8.8.8（谷歌DNS服务器）的路由路径
        },
        {
            name: "nslookup",
        description: "查询域名系统（DNS）记录，获取域名对应的IP地址等信息",
        example: "nslookup www.google.com" // 查询www.google.com的DNS记录，获取其IP地址
        },
        {
        name: "dig",
        description: "功能类似nslookup，用于查询DNS信息，产出色的更详细",
        example: "dig +short www.baidu.com" // 快速查询www.baidu.com的IP地址，只显示简短结果
        },
        {
        name: "wget",
        description: "从网络上下载文件",
        example: "wget https://example.com/file.zip" // 从指定网址下载file.zip文件
        }
    ],
    '系统管理': [
        {
            name: "reboot",
            description: "重启系统",
            example: "sudo reboot" // 使用sudo权限执行重启系统操作
        },
        {
            name: "shutdown",
            description: "关闭系统",
            example: "sudo shutdown -h now" // 使用sudo权限立即关闭系统
        },
        {
            name: "useradd",
        description: "添加新用户",
        example: "sudo useradd newuser" // 使用sudo权限添加名为newuser的新用户
        },
        {
        name: "userdel",
        description: "删除用户",
        example: "sudo userdel -r olduser" // 使用sudo权限删除名为olduser的用户，并删除其家目录
        },
        {
        name: "passwd",
        description: "修改用户密码",
        example: "sudo passwd user" // 使用sudo权限修改user用户的密码
        },
        {
        name: "su",
        description: "切换用户身份",
        example: "su - root" // 切换到root用户，加载root用户的环境配置
        },
        {
        name: "sudo",
        description: "以其他用户（通常是超级用户）的权限执行命令",
        example: "sudo apt-get update" // 使用sudo权限执行更新软件源命令
        },
        {
        name: "systemctl",
        description: "用于管理系统服务，如启动、停止、重启等",
        example: "systemctl start httpd" // 启动httpd服务
        },
        {
        name: "logrotate",
        description: "管理系统日志文件的轮转，防止日志文件过大",
        example: "logrotate -f /etc/logrotate.conf" // 强制按照配置文件/etc/logrotate.conf进行日志轮转
        }
    ],
    '文本处理': [
        {
            name: "cat",
        description: "查看文件内容并输出到终端",
        example: "cat file.txt" // 查看当前目录下file.txt的内容
        },
        {
        name: "more",
        description: "分页查看文件内容，适合长文件",
        example: "more largefile.txt" // 分页查看largefile.txt的内容，按空格键翻页
        },
        {
        name: "less",
        description: "功能类似more，但功能更强大，可向前向后翻页",
        example: "less -N file.txt" // 查看file.txt的内容，显示行号，可按上下箭头键前后翻页
        },
        {
        name: "head",
        description: "查看文件开头的若干行",
        example: "head -n 10 file.txt" // 查看file.txt的前10行内容
        },
        {
        description: "tail",
        description: "查看文件末尾的若干行",
        example: "tail -n 5 file.txt" // 查看file.txt的后5行内容
        },
        {
        name: "grep",
        description: "在文件中搜索指定字符串",
        example: "grep 'error' log.txt" // 在log.txt中搜索包含'error'的行
        },
        {
        name: "sed",
        description: "用于文本的替换、删除、插入等编辑操作",
        example: "sed -i 's/oldtext/newtext/g' file.txt" // 将file.txt中的所有oldtext替换为newtext
        },
        {
        name: "awk",
        description: "强大的文本处理工具，可按指定模式处理文本列",
        example: "awk '{print $1,$3}' data.csv" // 打印data.csv文件中每行的第1列和第3列内容
        },
        {
        name: "sort",
        description: "对文本文件内容进行排序",
        example: "sort file.txt" // 对file.txt的内容进行排序
        }
    ],
    '权限管理': [
        {
        name: "chmod",
        description: "改变文件或目录的权限，用数字或符号表示权限模式",
        example: "chmod u+x,g-w,o-r myfile.sh" // 给所有者添加执行权限，群组去掉写权限，其他用户去掉读权限
        },
        {
        name: "chown",
        description: "更改文件或irectory的所有者和所属组",
        example: "chown -R user:group mydir" // 递归更改mydir目录及其子目录下所有文件的所有者为user，所属组为group
        },
        {
        name: "umask",
        description: "设置默认的文件创建权限掩码",
        example: "umask 022" // 设置文件创建时的默认权限掩码为022，对应默认权限
        },
        {
        name: "setfacl",
        description: "设置文件或目录的访问控制列表（ACL）",
        example: "setfacl -m u:user:rwx file.txt" // 给用户user设置对file.txt的读、写、执行权限
        },
        {
        name: "getfacl",
        description: "获取文件或目录的访问控制列表信息",
        example: "getfacl file.txt" // 获取file.txt的访问控制列表信息
        },
        {
        name: "chgrp",
        description: "更改文件或目录的所属组",
        example: "chgrp newgroup file.txt" // 将file.txt的所属组改为newgroup
        }
    ],
    '软件安装与管理': [
        {
        name: "apt-get",
        description: "基于Debian、Ubuntu等系统的标管理工具，用于安装、更新、卸载软件包",
        example: "sudo apt-get install nginx" // 使用sudo权限在Ubuntu系统上安装nginx软件包
        },
        {
        name: "yum",
        description: "基于Red Hat、CentOS等系统的包管理工具，类似apt-get",
        example: "yum install httpd" // 在CentOS系统上安装httpd软件包
        },
        {
        name: "rpm",
        description: "用于安装、卸载、查询、验证基于RPM包格式的软件包",
        example: "rpm -ivh mypackage.rpm" // 安装mypackage.rpm软件包，-i表示安装，-v表示显示详细信息，-h表示显示安装进度
        },
        {
        name: "dpkg",
        description: "Debian、Ubuntu系统下安装、卸载、查询软件包的工具，比apt-get底层",
        example: "dpkg -i mypackage.deb" // 安装mypackage.deb软件包
        },
        {
        name: "pip",
        description: "用于安装Python包",
        example: "pip install requests" // 安装Python的requests包
        },
        {
        name: "npm",
        description: "用于安装Node.js包",
        example: "npm install express" // 安装Node.js的express包
        },
        {
        name: "yum-remove",
        description: "基于Red Hat、CentOS等系统的卸载软件包工具，类似yum",
        example: "yum-remove httpd" // 在CentOS系统上卸载httpd软件包
        }
    ],
    '磁盘管理': [
        {
        name: "df",
        description: "查看文件系统的磁盘空间使用情况",
        example: "df -h" // 以人类可读的格式查看磁盘空间使用情况
        },
        {
        name: "du",
        description: "查看目录或文件占用的磁盘空间大小",
        example: "du -sh /home" // 以总结模式查看/home目录占用的磁盘空间大小，-s表示总结，-h表示人类可读
        },
        {
        name: "fdisk",
        description: "用于磁盘分区操作，创建、删除、修改分区等",
        example: "fdisk /dev/sda" // 对/dev/sda磁盘进行分区操作
        },
        {
        name: "parted",
        description: "高级磁盘分区工具，支持GPT等新型分区表",
        example: "parted /dev/sdb" // 使用parted工具对/dev/sdb磁盘进行分区操作
        },
        {
        name: "mkfs",
        description: "创建文件系统，如ext4、fat32等",
        example: "mkfs.ext4 /dev/sdc1" // 在/dev/sdc1分区上创建ext4文件系统
        },
        {
        name: "mount",
        description: "挂载文件系统到指定目录",
        example: "mount /dev/sdd1 /mnt" // 将/dev/sdd1分区挂载到/mnt目录
        },
        {
        name: "umount",
        description: "卸载已挂载的文件系统",
        example: "umount /mnt" // 卸载挂载在/mnt目录上的文件系统
        },
        {
        name: "sync",
        description: "将内存中的数据同步到磁盘",
        example: "sync" // 执行同步操作，确保数据安全写入磁盘
        }
    ],
    '备份与压缩': [
        {
            name: "tar",
            description: "打包和压缩文件，可创建.tar、.tar.gz等格式",
            example: "tar -czvf myarchive.tar.gz /home/user/data" // 将/home/user/data目录打包并压缩成myarchive.tar.gz文件，-c表示创建，-z表示用gzip压缩，-v表示显示详细过程，-f指定文件名
        },
        {
            name: "zip",
            description: "创建.zip格式的压缩文件",
            example: "zip -r myfiles.zip /home/user/files" // 将/home/user/files目录下的文件压缩成myfiles.zip文件，-r表示递归压缩目录
        },
        {
            name: "unzip",
            description: "解压.zip格式的压缩文件",
            example: "unzip myfiles.zip" // 解压myfiles.zip文件到当前目录
        },
        {
            name: "gzip",
            description: "压缩单个文件为.gz格式",
            example: "gzip file.txt" // 将file.txt压缩成file.txt.gz
        },
        {
            name: "bzip2",
            description: "压缩单个文件为.bz2格式，通常比gzip压缩率高",
            example: "bzip2 data.dat" // 将data.dat压缩成data.dat.bz2
        },
        {
            name: "rsync",
            description: "高效远程同步工具，可用于备份数据",
            example: "rsync -avz /source/dir /destination/dir" // 以归档、详细、压缩模式将/source/dir同步到/destination/dir，-a表示归档，-v表示详细输出，-z表示压缩传输
        },
        {
            name: "xz",
            description: "使用xz算法压缩文件，提供高压缩比",
            example: "xz -z file.txt" // 压缩file.txt为file.txt.xz，默认保留原文件
        },
        {
            name: "rar",
            description: "创建或解压.rar格式的压缩文件（需安装rar工具）",
            example: "rar a myarchive.rar /home/user/docs" // 将/home/user/docs目录压缩成myarchive.rar，a表示添加文件到压缩包
        },
        {
            name: "unrar",
            description: "解压.rar格式的压缩文件（需安装unrar工具）",
            example: "unrar x myarchive.rar" // 解压myarchive.rar到当前目录，x表示解压全部文件
        },
        {
            name: "cpio",
            description: "用于创建和提取文件归档，常结合其他命令使用",
            example: "find /home/user -print | cpio -o > mybackup.cpio" // 将/home/user下的文件归档到mybackup.cpio，先查找文件再输出到归档文件
        }
    ]
});

// 设置激活的选项卡函数
const setActiveTab = (index) => {
  activeTab.value = index;
};
</script>

<style scoped>
.linux-commands-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tab-buttons {
  display: flex;
  margin-bottom: 10px;
}

.tab-buttons button {
  padding: 5px 10px;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 5px;
}

.tab-buttons button.active {
  background-color: #007bff;
  color: white;
}

.command-item {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 15px;
}

h3 {
  margin-top: 0;
}

.tab-content {
  flex: 1;
  overflow-y: auto;
}
</style>